<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script type="text/javascript" src="/script/jquery.min.1.10.2.js"></script>
    <link rel="stylesheet" type="text/css" href="/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script type="text/javascript">
        $(function () {
            $('#name').bind('blur', function () {
                let name = $("#name").val();
                if (name === null || name.trim() === '') {
                    $("#msg").text('昵称不能为空')
                    return false
                }
            })
            $('#zid').bind('blur', function () {
                let zid = $("#zid").val();
                if (zid === null || zid.trim() === '') {
                    $("#msg").text('账号不能为空')
                    return false
                }
            })
            $('#password').bind('blur', function () {
                let password = $("#password").val();
                if (password === null || password.trim() === '') {
                    $("#msg").text('密码不能为空')
                    return false
                }
            })
            $('input:submit').bind('click', function () {
                let name = $("#name").val();
                if (name === null || name.trim() === '') {
                    $("#msg").text('昵称不能为空')
                    return false
                }
                let zid = $("#zid").val();
                if (zid === null || zid.trim() === '') {
                    $("#msg").text('账号不能为空')
                    return false
                }
                let password = $("#password").val();
                if (password === null || password.trim() === '') {
                    $("#msg").text('密码不能为空')
                    return false
                }
            })
        })
    </script>
    <style>
        body {
            margin: 0px;
        }

        .d1 {
            background-color: #0088ff;
            height: 40px;
            color: #dddddd;
            border: 1px solid;
            overflow: hidden;
        }

        .d2 {
            padding-left: 33px;
            margin: 9px auto;
            float: left;
        }

        .d3 {
            float: right;
            padding-right: 30px;
            margin: 9px auto;
        }

        table, tr, td {
            text-align: center;
        }
        tr{
            height: 70px;
        }
        input{
            margin-left: 10px;
        }
        a{
            text-decoration: none;
            color: #ff003b;
        }
    </style>
</head>
<body>
<div class="d1" style="">
    <div class="d2"><a style="color: #dddddd" href="index.html">网上日记本</a></div>
</div>
<h1 style="color: #1e989c;text-align: center;">欢迎注册</h1>
<form action="/user/regist" method="post">
    <div style="border: 1px solid skyblue;background-color: skyblue;width: 100%;position: fixed;height: 450px">
        <table align="center" style="width: 260px">
            <tr style="height: 10px">
                <td colspan="2"><a href="login.html" style="margin-left: 89px">已有账号？点击登录</a></td>
            </tr>
            <tr style="">
                <th>昵&nbsp;&nbsp;&nbsp;&nbsp;称：</th>
                <td style=""><input id="name" style="" type="text" name="name"/><br/></td>
            </tr>
            <tr style="">
                <th>账&nbsp;&nbsp;&nbsp;&nbsp;号：</th>
                <td><input type="text" id="zid" name="zid"/></td>
            </tr>
            <tr style="">
                <th>密&nbsp;&nbsp;&nbsp;&nbsp;码：</th>
                <td><input type="password" id="password" name="password"/></td>
            </tr>
            <tr>
                <th align="right" style="padding-bottom: 20px"><input type="submit" class="btn btn-success" value="注册" style=""></th>
                <td>
                    <div id="msg" style="color: red" th:text="${msg}"></div>
                </td>
            </tr>
        </table>
    </div>
</form>

<!--第四部分-->
<div id="bottom" style="position: absolute;bottom: 40px;left: 650px">
		<span>
			网上日记本.Copyright &copy;2021
		</span>
</div>
</body>
</html>
